<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="权限审批列表"
      rowKey="roleid"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      :reset-callback="resetCallback"
    >
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="DocumentChecked" @click="openDrawer(scope.row)">审批</el-button>
      </template>
    </ProTable>
    <EmployeeDialog :dialogVisible="dialogVisible" :handleClose="handleClose" :submitCallback="_submitEmployee" />
    <AuthDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="roleInfo">
import { ref } from "vue";

import ProTable from "@/components/ProTable/index.vue";
import EmployeeDialog from "./components/EmployeeDialog.vue";
import AuthDrawer from "./components/AuthDrawer.vue";
import { getAuthRegisterList, saveAutnRegister } from "@/api/modules/accessControl/empower/powerProcess";
import { DocumentChecked } from "@element-plus/icons-vue";
const dialogVisible = ref(false);
const empname = ref("");
const empid = ref("");

const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getAuthRegisterList({ ...newParams, empId: empid.value });
};

const columns = [
  { prop: "sn", label: "序号", width: 120 },

  {
    prop: "empid",
    label: "人员",
    search: { el: "custom", props: { modelValue: empname } },
    isShow: false,
    _click: () => {
      dialogVisible.value = true;
    }
  },
  {
    prop: "begin",
    label: "提交开始时间",
    isShow: false,
    search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
  },
  {
    prop: "end",
    label: "提交结束时间",
    isShow: false,
    search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
  },
  {
    prop: "createtime",
    label: "提交时间",
    minWidth: 200
  },
  {
    prop: "empid",
    label: "申请人",
    minWidth: 200
  },
  {
    prop: "doorname",
    label: "门禁点描述",
    minWidth: 200
  },
  {
    prop: "reason",
    label: "申请理由",
    minWidth: 200
  },
  {
    prop: "approvalresult",
    label: "审批状态",
    render: scope => {
      const approvalresultArr = ["通过", "未通过"];
      return approvalresultArr[scope.row?.approvalresult - 1];
    },
    minWidth: 120
  },
  {
    prop: "updatetime",
    label: "审批时间",
    minWidth: 200
  },
  {
    prop: "remark",
    label: "备注",
    minWidth: 200
  },
  { prop: "operation", label: "操作", fixed: "right", width: 120 }
];

const _submitEmployee = curEmpInfo => {
  empid.value = curEmpInfo.empid;
  empname.value = curEmpInfo.empname;
  dialogVisible.value = false;
  proTable.value.getTableList();
};

const handleClose = () => {
  dialogVisible.value = false;
};

const resetCallback = () => {
  empname.value = "";
  empid.value = "";
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof AuthDrawer> | null>(null);
const openDrawer = (row = {}) => {
  const params = {
    title: "审批",
    row: { ...row },
    api: saveAutnRegister,
    getTableList: proTable.value.getTableList,
    resetTableList: proTable.value.reset
  };

  drawerRef.value?.acceptParams(params);
};
</script>
